<template>
    <el-dialog
        title="设置连锁"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="700px"
        top="20px"
        :before-close="clearData"
    >
        <div class="right">
            <el-button size="small" type="primary" @click="showAdd = true"
                >+添加商家</el-button
            >
        </div>
        <el-table
            :header-cell-style="headerCellStyle"
            size="small"
            :data="showList"
            border
            style="width: 100%"
        >
            <el-table-column
                prop="companyName"
                label="商家名称"
            ></el-table-column>
            <el-table-column
                prop="companyCode"
                label="商家编号"
            ></el-table-column>
            <el-table-column prop="telPhone" label="手机号"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="statusName" label="状态"></el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="delUser(scope.row)"
                        >移除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <div class="report-table-block">
            <div class="right">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
        <addCompany
            :value.sync="showAdd"
            :currRow="currRow"
            @getList="getList"
        ></addCompany>
    </el-dialog>
</template>

<script>
import addCompany from './addCompany'
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    components: {
        addCompany
    },
    data () {
        return {
            loading: false,
            showValue: false,
            showAdd: false,
            showList: [],
            position: 1,
            totalNum: 0
        }
    },
    watch: {
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                this.getList()
            }
            this.$emit('update:value', val)
        },
        position () {
            this.getList()
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        }
    },
    created () {
    },
    methods: {
        delUser (row) {
            console.log(row)
            this.$confirm('确定移除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$http.post(this.$store.state.IP + '/headCompany/deleteBranch', {
                    companyCode: this.currRow.companyCode,
                    branchCompanyCode: row.companyCode
                })
                let response = res.data
                if (response.ret === '0') {
                    this.$message({
                        message: '移除成功',
                        type: 'success'
                    })
                    this.getList()
                }
            }).catch(() => {
            })
        },
        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        },
        async getList () {
            let res = await this.$http.post(this.$store.state.IP + '/headCompany/getBranchList', {
                companyCode: this.currRow.companyCode,
                page: this.position - 1, // 页数
                size: 10 // 一页显示数量
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.showList = response.data.list
                this.totalNum = response.data.total
            }
        },
        // 清空数据
        clearData () {
            this.showList = []
            this.totalNum = 0
            this.loading = false
            this.showValue = false
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.right
    text-align: right
    margin: 10px 0

.items
    width: 220px

.checkboxWrap
    height: 300px
    overflow: auto

.checkItem
    width: 180px
    display: flex
    align-items: center
    margin-left: 0 !important
</style>